<template>
  <a-form
    id="components-form-demo-normal-login"
    :form="form"
    class="login-form"
    @submit="handleSubmit"
  >
    <a-form-item v-bind="formItemLayout" label="用户名">
      <a-input
        placeholder="用户名"
        v-decorator="[
          'username',
          {
            rules: [
              { required: true, message: '请输入用户名!', whitespace: true },
            ],
          },
        ]"
      >
        <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input>
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="密码">
      <a-input-password
        v-decorator="[
          'password',
          {
            rules: [
              { required: true, message: '请输入密码!', whitespace: true },
            ],
          },
        ]"
        type="password"
        placeholder="密码"
      >
        <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input-password>
    </a-form-item>
    <a-form-item v-bind="tailFormItemLayout">
      <a-checkbox
        v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          },
        ]"
      >
        记住密码
      </a-checkbox>
      <a class="login-form-forgot" href=""> 忘记密码 </a>
      <a-button type="primary" html-type="submit" class="login-form-button">
        登录
      </a-button>
      或
      <router-link to="register">去注册! </router-link>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
          lg: { span: 6 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
          lg: {
            span: 6,
          },
        },
      },
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, { username, password }) => {
        if (!err) {
          this.$message.loading({ content: "Loading...", key: "login" });
          this.$axios
            .post("/api/user/login.php", { username, password })
            .then(({ data }) => {
              if (data.code == 1) {
                this.$message.success({ content: data.msg, key: "login" });
                // 保存用户数据
                // 设置cookie
                const info = data.data[0];

                // 设置header的用户信息
                this.$bus.$emit("setUserInfo", info);
                // 跳转首页
                this.$router.push("/");
              } else {
                this.$message.error({ content: data.msg, key: "login" });
              }
            });
        }
      });
    },
  },
};
</script>
<style>
.login-form {
  margin: 0 auto !important;
}
.login-form-forgot {
  float: right;
}
.login-form-button {
  width: 100%;
}
</style>
